<template>
  <tr class="transition-colors duration-150 hover:bg-gray-50 animate-fadeIn"
    :class="index % 2 === 0 ? 'bg-white' : 'bg-gray-50'" :style="{ animationDelay: `${index * 0.05}s` }">
    <!-- 键列：固定宽度 + 统一字体样式 -->
    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-700 border-r border-gray-200 w-1/4">
      {{ keyName }}
    </td>

    <!-- 值列：数组内对象判断+格式化显示（统一字体） -->
    <td class="px-6 py-4 text-sm">
      <!-- 1. 基础类型（字符串/数字/布尔值）：默认样式 -->
      <template v-if="isBasicType">
        <span :class="valueClass">{{ formattedValue }}</span>
      </template>

      <!-- 2. 数组类型：判断项是否为对象，分别处理 -->
      <template v-else-if="isArrayType">
        <div class="space-y-3"> <!-- 增大数组项间距，避免拥挤 -->
          <div v-for="(item, idx) in value" :key="`array-${idx}-${getItemKey(item)}`" class="flex flex-col">
            <!-- 数组项前缀（•） -->
            <div class="flex items-start">
              <span class="text-gray-400 mr-2 mt-1 flex-shrink-0">•</span>

              <!-- 2.1 数组项是对象：JSON格式化+缩进显示 -->
              <template v-if="isObjectItem(item)">
                <div class="flex-1 rounded-md overflow-x-auto">
                  <pre class="text-sm text-gray-600 whitespace-pre-wrap m-0 font-normal"
                    style="line-height: 1.6; font-family: inherit;">
{{ formatObjectItem(item) }}
                  </pre>
                </div>
              </template>

              <!-- 2.2 数组项非对象：原有样式显示 -->
              <template v-else>
                <span class="text-sm text-gray-600 mt-0.5 font-normal">{{ formatItem(item) }}</span>
              </template>
            </div>
          </div>
        </div>
      </template>

      <!-- 3. 顶层对象类型：JSON格式化显示 -->
      <template v-else-if="isObjectType">
        <div class="rounded-md overflow-x-auto">
          <pre class="text-sm text-gray-600 whitespace-pre-wrap m-0 font-normal"
            style="line-height: 1.6; font-family: inherit;">
{{ formattedObject }}
          </pre>
        </div>
      </template>

      <!-- 4. 空值类型 -->
      <template v-else>
        <span class="text-sm text-gray-400 font-normal">-</span>
      </template>
    </td>
  </tr>
</template>

<script setup>
import { computed, unref } from 'vue';

// 子组件属性
const props = defineProps({
  keyName: {
    type: String,
    required: true
  },
  value: {
    type: [String, Number, Boolean, Array, Object, null, undefined],
    required: true
  },
  index: {
    type: Number,
    required: true
  }
});

// 1. 顶层类型判断
const isBasicType = computed(() => {
  const val = unref(props.value);
  return typeof val !== 'object' || val === null;
});

const isArrayType = computed(() => Array.isArray(unref(props.value)));

const isObjectType = computed(() => {
  const val = unref(props.value);
  return typeof val === 'object' && val !== null && !Array.isArray(val);
});

// 2. 新增：判断数组项是否为对象（排除null和数组）
const isObjectItem = (item) => {
  return typeof item === 'object' && item !== null && !Array.isArray(item);
};

// 3. 基础类型格式化
const formattedValue = computed(() => {
  const val = unref(props.value);
  if (val === null || val === undefined) return '-';
  if (typeof val === 'boolean') return val ? '是' : '否';
  return val;
});

// 4. 基础类型样式（统一字体，仅布尔值保留加粗）
const valueClass = computed(() => {
  const val = unref(props.value);
  return {
    'text-sm': true,          // 统一字体大小：14px（text-sm）
    'text-gray-600': true,    // 统一字体颜色：中灰色（text-gray-600）
    'font-medium': typeof val === 'boolean' // 仅布尔值加粗（突出状态），其他均为常规字重
  };
});

// 5. 数组非对象项格式化
const formatItem = (item) => {
  if (item === null || item === undefined) return '-';
  // 若数组项是子数组，显示“[数组(长度)]”简化形式（避免嵌套过深）
  if (Array.isArray(item)) return `[数组(${item.length}项)]`;
  return item;
};

// 6. 新增：数组对象项格式化（4空格缩进，与顶层对象一致）
const formatObjectItem = (item) => {
  return JSON.stringify(item, null, 4);
};

// 7. 顶层对象格式化
const formattedObject = computed(() => {
  return JSON.stringify(unref(props.value), null, 4);
});

// 8. 数组项唯一key（避免重复渲染）
const getItemKey = (item) => {
  if (typeof item !== 'object' || item === null) return String(item);
  return JSON.stringify(item);
};
</script>

<style scoped>
/* 动画样式 */
.animate-fadeIn {
  animation: fadeIn 0.2s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 修复pre标签样式：统一继承父元素字体（避免默认等宽字体），确保行高一致 */
pre {
  line-height: 1.6;
  font-family: inherit;
  /* 继承外层text-sm的字体（如系统默认 sans-serif），避免等宽字体突兀 */
}
</style>